<!DOCTYPE html>
<html>
    <head>
        <title>Report Batch Reject</title>
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js"></script>
        <script type="module" src="./vantaBackground.js"></script>
        <style>
            body {
                font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
                background: rgba(98, 105, 100, 0.655);
                color: #fff;
                margin: 0;
                padding: 20px;
            }
            h1 {
                text-align: center;
                color: #fff;
                margin-bottom: 30px;
            }
            .parent-flexbox {
                align-items: center;
                display: flex;
                justify-content: center;
                gap: 80px;
                flex: 1;
            }
            .parent-flexbox > div {
                margin-left: 42px;
            }
            .form-container {
                width: 400px;
                background: linear-gradient(#212121, #212121) padding-box,
                            linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
                border: 3px solid transparent;
                padding: 24px 24px;
                font-size: 14px;
                font-family: inherit;
                color: white;
                display: flex;
                flex-direction: column;
                gap: 20px;
                box-sizing: border-box;
                border-radius: 16px;
                background-size: 200% 100%;
                animation: gradient 5s ease infinite;
            }
            .form-container .form-group textarea {
                width: 90%;
                padding: 10px 10px;
                border-radius: 8px;
                resize: none;
                color: #fff;
                height: 90px;
                background-color: transparent;
                font-family: inherit;
                transition: border-color 0.3s ease;
            }
            .form-container .form-group textarea:focus {
                outline: none;
                border-color: #e81cff;
            }
            .button {
                height: 50px;
                width: 200px;
                position: relative;
                background-color: transparent;
                cursor: pointer;
                border: 2px solid #252525;
                overflow: hidden;
                border-radius: 30px;
                color: #333333;
                transition: all 0.5s ease-in-out;
            }
            .btn-txt {
                z-index: 1;
                font-weight: 800;
                letter-spacing: 4px;
            }
            .type1::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                transition: all 0.5s ease-in-out;
                background-color: #f826c7;
                border-radius: 30px;
                visibility: hidden;
                height: 10px;
                width: 10px;
                z-index: -1;
            }
            .button:hover {
                box-shadow: 1px 1px 200px #252525;
                color: #fff;
                border: none;
            }
            .type1:hover::after {
                visibility: visible;
                transform: scale(100) translateX(2px);
            }
            .checkbox-wrapper-35 .switch {
                display: none;
            }
            .checkbox-wrapper-35 .switch + label {
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
                color: #27272f;
                cursor: pointer;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 12px;
                line-height: 15px;
                position: relative;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .checkbox-wrapper-35 .switch + label::before,
            .checkbox-wrapper-35 .switch + label::after {
                content: '';
                display: block;
            }
            .checkbox-wrapper-35 .switch + label::before {
                background-color: #05012c;
                border-radius: 500px;
                height: 20px;
                margin-right: 8px;
                -webkit-transition: background-color 0.125s ease-out;
                transition: background-color 0.125s ease-out;
                width: 40px;
            }
            .checkbox-wrapper-35 .switch + label::after {
                background-color: #fff;
                border-radius: 13px;
                box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
                height: 18px;
                left: 1px;
                position: absolute;
                top: 1px;
                -webkit-transition: -webkit-transform 0.125s ease-out;
                transition: -webkit-transform 0.125s ease-out;
                transition: transform 0.125s ease-out;
                transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
                width: 18px;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-text {
                display: block;
                margin-right: .3em;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-toggletext {
                display: block;
                font-weight: bold;
                height: 15px;
                overflow: hidden;
                position: relative;
                width: 40px;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-unchecked,
            .checkbox-wrapper-35 .switch + label .switch-x-checked {
                left: 0;
                position: absolute;
                top: 0;
                -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
                transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
                transition: transform 0.125s ease-out, opacity 0.125s ease-out;
                transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-unchecked {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
            .checkbox-wrapper-35 .switch + label .switch-x-checked {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }
            .checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
                position: absolute;
                visibility: hidden;
            }
            .checkbox-wrapper-35 .switch:checked + label::before {
                background-color: #ffb500;
            }
            .checkbox-wrapper-35 .switch:checked + label::after {
                -webkit-transform: translate3d(20px, 0, 0);
                transform: translate3d(20px, 0, 0);
            }
            .checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
            .checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
            .switch-container{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .checkbox-wrapper-35 {
                margin-bottom: 10px;
            }
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                width: 100%;
            }
            button-back {
                align-items: center;
                background-color: transparent;
                color: #fff;
                cursor: pointer;
                display: flex;
                font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
                font-size: 1rem;
                font-weight: 700;
                line-height: 1.5;
                text-decoration: none;
                text-transform: uppercase;
                outline: 0;
                border: 0;
                padding: 1rem;
            }
            button-back:before {
                background-color: #fff;
                content: "";
                display: inline-block;
                height: 1px;
                margin-right: 10px;
                transition: all .42s cubic-bezier(.25,.8,.25,1);
                width: 0;
            }
            button-back:hover:before {
                background-color: #fff;
                width: 3rem;
            }
            .vanta-container {
                width: 100%;
                height: 100vh; /* 占据整个视口的高度 */
                position: fixed;
                top: 0;
                left: 0;
                z-index: -1;
            }
            
            /* 进度条样式 */
            .progress-container {
                width: 100%;
                background-color: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                margin-bottom: 20px;
                margin-top: 20px;
                display: none;
                overflow: hidden;
                height: 8px;
            }
            .progress-bar {
                height: 100%;
                background: linear-gradient(90deg, #4285F4, #f826c7);
                border-radius: 10px;
                width: 0%;
                transition: width 0.5s ease;
                box-shadow: 0 0 10px rgba(66, 133, 244, 0.5);
            }
        </style>
    </head>
    <body>
        <div id="vantaRef" class="vanta-container"></div>
        <h1>Report Batch Reject</h1>
        <div id="plugin-info-container"></div>
        <div id="reject">
            <div class="parent-flexbox">
                <div class="switch-container">
                    <div class="checkbox-wrapper-35">
                        <input 
                            type="checkbox" 
                            id="switch" 
                            v-model="isPRD" 
                            @change="handleAddressSwitch" 
                            class="switch"
                            checked
                        />
                        <label for="switch">
                            <span class="switch-x-text">GPO </span>
                            <span class="switch-x-toggletext">
                                <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>UAT</span>
                                <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>PRD</span>
                            </span>
                        </label>
                    </div>
                    <div class="checkbox-wrapper-35">
                        <input 
                            type="checkbox" 
                            id="headless-switch" 
                            v-model="isHeadless" 
                            @change="handleStepsSwitch" 
                            class="switch"
                        />
                        <label for="headless-switch">
                            <span class="switch-x-text">Steps </span>
                            <span class="switch-x-toggletext">
                                <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>Hide</span>
                                <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>Show</span>
                            </span>
                        </label>
                    </div>
                </div>
                <!-- 输入框 -->
                <div class="form-container">
                    <form class="form">
                        <div class="form-group">
                            <textarea id="orderNumbers" required cols="50" rows="10" name="textarea" placeholder="请输入多个报告号，每个报告号独占一行，上限100个"></textarea>
                        </div>
                    </form>
                </div>
                <button class="button type1" id="startButton">
                    <span class="btn-txt">START</span>
                </button>
            </div>
            <!-- 进度条容器 -->
            <div id="progress-container" class="progress-container">
                <div id="progress-bar" class="progress-bar"></div>
            </div>
            
            <!-- 结果显示容器 -->
            <div id="result-container" style="margin-top: 20px; width: 100%; overflow-x: auto;"></div>
            <log-panel :logs="logs" :errors="errors"></log-panel>
        </div>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>    
        <script src="https://unpkg.com/element-plus"></script>
        <script src="batch-reject.js"></script>
        <script type="module">
            import { loadPluginInfo } from './PluginInfo.js';
            import { initVantaBackground, destroyVantaBackground } from './vantaBackground.js';
            document.addEventListener('DOMContentLoaded', async() => {
                if (htmlUIAPI) {
                    htmlUIAPI.injectWindowControls();
                }
                // 初始化 Vanta 背景
                if (typeof VANTA !== 'undefined') {
                    import('./vantaBackground.js').then(({ initVantaBackground, destroyVantaBackground }) => {
                    initVantaBackground();

                    // 页面卸载时销毁 Vanta 背景
                    window.addEventListener('beforeunload', () => {
                        destroyVantaBackground();
                    });
                    });
                } else {
                    console.error('VANTA 库未正确加载');
                }

                // 页面卸载时销毁 Vanta 背景
                window.addEventListener('beforeunload', () => {
                    destroyVantaBackground();
                });
                // 插入插件信息组件
                const pluginInfoContainer = document.createElement('div');
                pluginInfoContainer.innerHTML = await (await fetch('./PluginInfo.html')).text();
                const h1Element = document.querySelector('h1');
                if (h1Element) {
                    h1Element.insertAdjacentElement('afterend', pluginInfoContainer);
                }
                // 加载插件信息
                await loadPluginInfo('manifest.json');
            });
        </script>
    </body>
</html>
